<%@taglib prefix="s" uri="/struts-tags" %>

<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>Birthdate</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<% int num = 1; %>
		<s:iterator value="persons">
		<tr>
			<td><a class="detail" href="<s:url value="/person" />/${id}"><%= num++ %></a></td>
			<td>${firstName} ${lastName}</td>
			<td>${birthdate}</td>
			<td>${addresss}</td>
		</tr>
		</s:iterator>
	</tbody>
</table>

<script type="text/javascript">
	$(function() {
		$('.detail').each(function() {
			$(this).click(function(e) {
				e.preventDefault();

				var dialog = document.createElement("div");
				$(dialog).addClass('modal');
				$(dialog).addClass('fade');
				$(document.body).append(dialog);
				
				$(dialog).load($(this).attr('href'));
				$(dialog).modal('show');
				
				$(dialog).on('hide', function() {
					$(this).remove();
				});
			});
		});
	});
</script>